<template>
    <!-- 购物车头部组件 -->
  <div id="CartTop">
    <catrtop />
  </div>
  <!-- 订单列表 -->
  <div style="display: flex; flex-direction: column; align-items: center;" id="Catalog">
    <h1>My Orders</h1>
    <table style="width: 60%; background-color: #e9e9e9; border-collapse: collapse;" class="table-container">
      <thead>
        <tr>
          <th>Order ID</th>
          <th>Date</th>
          <th>Total Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="orders.length === 0">
          <td colspan="3"><b>暂时没有订单</b></td>
        </tr>
        <tr v-for="order in orders" :key="order.orderId">
          <td>
                <RouterLink :to="{ path: '/orderdetail', query: { orderId: order.orderId } }">
                         {{ order.orderId }}
                </RouterLink>
         </td>
          <td>{{ formatDate(order.orderDate) }}</td>
          <td>${{ order.totalPrice }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--购物车底部组件-->
  <div id="CartBottom">
    <cartbottom />
  </div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios';
import catrtop from '../components/CartPageTop.vue';
import cartbottom from '../components/CartPageBottom.vue';

const orders=ref([]);
//在组件挂载后执行一次，常用于初始化加载数据
onMounted(async () => {
    //get请求数据
 const response = await axios.get('/api/order',{
      headers: {
        'Authorization': localStorage.getItem('token') // 假设你的token存储在localStorage中
      }
    }) ;
    orders.value=response.data.data; // 假设返回的数据包含一个名为data的数组
    console.log("返回全部的订单信息：",orders.value);
  

});


function formatDate(dateString) {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
  return new Date(dateString).toLocaleDateString('en-US', options);
}


</script>

<style scoped>
#Catalog {
  margin-bottom: 15vh;
}

.table-container {
  width: 60%;
  background-color: #e9e9e9;
  border-collapse: collapse;
  border: 3px white;
  
}

.table-container th{
  font-size: 25px;
  font-weight: 900;
  text-align: left;
}
.table-container td {
  border: 2px solid white;
  padding: 8px;
  text-align: left;
  font-size: 25px;
}


</style>
   